/*
 * 单进度条组件
 * @Author: ljb
 * @Date: 2018-06-06 16:40:13
 * @Last Modified by: ljb
 * @Last Modified time: 2018-06-06 17:40:46
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .progress-bar {
        width: 100%;
        height: 8px;
        border-radius: 5px;
    }

</style>
<template>
	<div
		:class="'bar-'+unit_id"
		class="progress-bar"/>
</template>

<script>
export default {
	name: 'Progress',
	props: {
		// 数组，里面颜色仅支持rgb格式
		bgColors: {
			type: Array,
			default() {
				return ['rgb(0, 0, 0)', 'rgba(0, 0, 0, 0.3)'];
			},
		},
		value: {
			type: Number,
			default() {
				return 0;
			},
		},
		maxValue: {
			type: Number,
			default() {
				return 100;
			},
		},
		// 需要传字符串，px或者百分比
		width: {
			type: String,
			default() {
				return '100%';
			},
		},
	},
	data() {
		return {
			unit_id: new Date().getTime(),
		};
	},
	mounted() {
		this.initProgress();
	},
	methods: {

		/**
         * 初始化滑条样式
         * @return {undefined}
         */
		initProgress() {
			const progress_bar = document.getElementsByClassName(`bar-${this.unit_id}`)[0];

			const percentage = (this.value / this.maxValue).toFixed(2) * 100;

			const [first_color, second_color] = this.bgColors;

			progress_bar.style.background = `linear-gradient(to right,${first_color} ${percentage}%,${second_color} ${1 - percentage}%)`;

			if (this.width) {
				progress_bar.style.width = this.width;
			}
		},

	},
};
</script>
